import React, {Component, PropTypes} from 'react';

import { Form, Input, Button, Row } from 'antd';

const FormItem = Form.Item;
const createForm = Form.create;


export class Login extends Component {

  state = {
    error : '',
    disabled : true
  }

  constructor (props) {
    super(props);
  }

  componentDidMount(){

    console.log('aaaaaaa');
    var _self = this;
    setTimeout(()=>{
      _self.setState({
        disabled : false
      })
    },1000)
  }

  render() {

    const { getFieldDecorator, validateFieldsAndScroll } = this.props.form;
    const {loginPost} = this.props.actions;
    const _self = this;

    function handleOk () {
      validateFieldsAndScroll((errors, values) => {
        if (errors) {
          return
        };
        loginPost(values).then((res)=>{

        }).catch(err=>{
          _self.setState({
            error : err
          })
        });
      })
    }

    return (
      <div className="form">
        <div className="logo">
          <img src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" />
          <span>登录</span>
        </div>

        <form>
          <FormItem hasFeedback>
            {getFieldDecorator('username', {
              rules: [
                {
                  required: true,
                  message: '请填写用户名',
                },
              ],
            })(<Input size="large" disabled={this.state.disabled} onPressEnter={handleOk}  placeholder="用户名" />)}
          </FormItem>
          <FormItem hasFeedback>
            {getFieldDecorator('password', {
              rules: [
                {
                  required: true,
                  message: '请填写密码',
                },
              ],
            })(<Input size="large" type="password" disabled={this.state.disabled} onPressEnter={handleOk} placeholder="密码" />)}
          </FormItem>
          <Row>
            <Button type="primary" size="large" onClick={handleOk}>
              登录
            </Button>
          </Row>
          {
            this.state.error && <p style={{color:'#f04134'}}>{this.state.error}</p>
          }
        </form>
      </div>
    )
  }

}

export default createForm()(Login);